<script setup lang="ts">
import { useSettingStore } from "@/stores/index";
import { ref, reactive } from "vue";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
const isScaleRadio = ref(true);
const leftBottomRadio = ref(true);
const rightBottomRadio = ref(true);
const settingStore = useSettingStore();
const { indexConfig } = storeToRefs(settingStore);
const router = useRouter();
const init = () => {
    settingStore.initSetting();
    isScaleRadio.value = settingStore.isScale;

    leftBottomRadio.value = indexConfig.value.leftBottomSwiper;
    rightBottomRadio.value = indexConfig.value.rightBottomSwiper;
};
init();
const handleClose = () => {};

const cancelClick = () => {
    settingStore.setSettingShow(false);
};

const confirmClick = () => {};
const isScaleChange = (flag: boolean) => {
    settingStore.setIsScale(flag);
};
const radiochange = (blag: boolean) => {
    settingStore.setIsScale(blag);
    // this.$store.commit('setting/updateSwiper', { val, type })
};
const indexRadioChange = (flag: boolean) => {
    settingStore.setIndexConfig({
        leftBottomSwiper: leftBottomRadio.value, //左轮播
        rightBottomSwiper: rightBottomRadio.value, //右下轮播
    });
};
// 路由按钮
const routers = reactive([
    { name: "index", pageName: "首屏" },
    { name: "order", pageName: "订单屏" },
    { name: "product", pageName: "商品屏" },
    { name: "users", pageName: "用户屏" },
]);
// 路由跳转方法
const handleRouter = (route: { name: any }) => {
    router.push({ name: route.name });
};
</script>

<template>
    <el-drawer v-model="settingStore.settingShow" direction="rtl" size="320px">
        <template #header>
            <h2 class="setting-title">设置</h2>
        </template>
        <template #default>
            <div class="left_shu">全局设置</div>
            <div class="setting_item">
                <span class="setting_label">
                    是否进行自动适配
                    <span class="setting_label_tip">(默认分辨率1920*1080)</span>
                    :
                </span>
                <div class="setting_content">
                    <el-radio-group v-model="isScaleRadio" @change="flag => isScaleChange(flag as boolean)">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div class="left_shu">实时监测</div>
            <div class="setting_item">
                <span class="setting_label">
                    设备提醒自动轮询:
                    <span class="setting_label_tip"></span>
                </span>
                <div class="setting_content">
                    <el-radio-group v-model="leftBottomRadio" @change="flag => indexRadioChange(flag as boolean)">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div class="setting_item">
                <span class="setting_label">实时预警轮播:</span>
                <div class="setting_content">
                    <el-radio-group v-model="rightBottomRadio" @change="flag => indexRadioChange(flag as boolean)">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </div>
            </div>
        </template>
        <template #footer>
            <div class="btn-wrapper">
                <el-button class="btn-item" v-for="item in routers" @click="handleRouter(item)">{{ item.pageName }}</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<style scoped lang="scss">
.setting-title {
    font-size: 20px;
    color: #000;
    font-weight: 900;
    text-align: center;
    line-height: 1;
}
.left_shu {
    color: #000;
    font-weight: 900;
    position: relative;
    text-indent: 10px;
    padding: 16px 0 10px 0;
    line-height: 1;
    &::before {
        display: block;
        content: " ";
        height: 16px;
        width: 4px;
        border-radius: 2px;
        background: #0072ff;
        position: absolute;
        left: 0px;
    }
}
.setting_item {
    font-size: 14px;
    line-height: 1.5;
    .setting_label {
        color: #555454;
    }
    .setting_label_tip {
        font-size: 12px;
        color: #838282;
    }
}
// 底部路由按钮
.btn-wrapper {
    display: grid;
    /* 3 列，宽度均分，自动换行 */
    grid-template-columns: repeat(3, 1fr);
    gap: 16px; /* 行列间距，可按需调整 */
    padding: 0;
    margin: 0;
    list-style: none; /* 去掉 li 默认圆点 */
}
</style>
